<template>
  <view class="post-strategy-container">
    <view class="header-container">
      <view class="left" @tap="toBack"><text class="iconfont icon-back"></text></view>
      <view class="center">发布攻略</view>
      <view class="right">
      </view>
    </view>
    <view class="main-container">
      <view class="form-item" style="margin-top: 15px">
        <view v-show="!imageUrl" class="image-control" @tap="upload">
          <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/find_imgs/push_image_1.png'" alt="">
        </view>
        <view v-show="imageUrl" @tap="upload">
          <basic-image :src="imageUrl" :error-src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/find_imgs/image_empty.png'" :costomer-style="{
            width: '100%'
          }" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-label">标题</view>
        <view class="form-item-content">
          <input v-model="title" class="text-input" type="text" name="" id="">
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-label">导语</view>
        <view class="form-item-content">
          <textarea v-model="info" class="textarea-input" name="" id="" cols="30" rows="10"></textarea>
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-label">内容</view>
        <view class="form-item-content">
          <textarea v-model="details" class="textarea-input" name="" id="" cols="100" rows="30"></textarea>
        </view>
      </view>
      <view class="submit-btn-wrapper">
        <button @click="submit">发布</button>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue from 'vue';
import BasicImage from '@/components/basic-image/basic-image.vue';
export default Vue.extend({
  components: { BasicImage },
  data() {
    return {
      title: "",
      imageUrl: "",
      info: "",
      details: "",
      uploadToken: ""
    }
  },
  mounted() {
    this.getQiniuToken();
  },
  methods: {
    toBack() {
      uni.navigateBack({ delta: 1 })
    },
    getQiniuToken() {
      this.$mainApi.apiGetQiniuToken().then((res: any) => {
        this.uploadToken = res.data;
      });
    },
    submit() {
      this.$mainApi.apiPushStrategy({
        title: this.title,
        imageUrl: this.imageUrl,
        info: this.info,
        details: this.details
      }).then((res: any) => {
        // uni.redirectTo({
        //   url: "/pages/strategy/index"
        // })
        uni.showModal({
          title: "提示",
          content: "发布的攻略会在审核之后显示",
          showCancel: false,
          confirmText: "知道了",
          success: () => {
            uni.navigateBack({ delta: 1 });
          }
        });
      });
    },
    upload() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          uni.uploadFile({
            url: this.$config.QINIUYUN_UP_API, 
            filePath: (res.tempFilePaths as any)[0],
            name: 'file',
            formData: {
              token: this.uploadToken,
              key: this.$config.QINIUYUN_UP_BEFORE_NAME + (res.tempFiles as any)[0].name
            },
            success: (uploadFileRes) => {
              console.log(uploadFileRes);
              this.imageUrl = this.$config.MAIN_IMAGE_SERVICE_ADDR + "/" + this.$config.QINIUYUN_UP_BEFORE_NAME + (res.tempFiles as any)[0].name
            },
            fail: (e) => {
              console.log(e);
            }
          });
        }
      });
    }
  }
})
</script>
<style lang="scss" scoped>
.post-strategy-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header-container {
  color: #fff;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
  background: #006b65;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
  overflow: auto;
}

.form-item {
  padding: 0px 15px;
  margin-bottom: 15px;
}

.image-control {
  padding: 15px 35vw;
  border: 2px dashed #bfbfbf;
  border-radius: 15px;

  img {
    width: 100%;
  }
}

.form-item .form-item-label {
  font-size: 16px;
  color: #333333;
  margin-bottom: 5px;
}

.form-item .form-item-content {
  display: flex;
}

.text-input, .textarea-input {
  flex-grow: 1;
  border-radius: 8px;
  padding: 5px;
  background-color: #f4f7f7;
}

.submit-btn-wrapper {
  padding: 15px;
  flex-shrink: 0;
}

.submit-btn-wrapper button {
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
  background: #006b65;
}
</style>